<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons :: head">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <div>
            <a onclick="add()" class="layui-btn">添加用户</a>
        </div>
        <div class="demoTable">
            搜索用户名：
            <div class="layui-inline">
                <input class="layui-input" id="nameReload" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>

        <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
    </div>
</div>


<div th:replace="commons :: script"></div>

</body>
</html>
<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table
            , layer = layui.layer
            , $ = layui.$;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            , url: basePath + "/sysUser/list"
            , method: 'post'
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , cols: [[
                {checkbox: true, fixed: true}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: true}
                , {field: 'name', title: '用户名', width: 80}
                , {field: 'loginName', title: '登录名', width: 80}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                // ,{field:'city', title: '城市', width:80}
                // ,{field:'sign', title: '签名'}
                // ,{field:'experience', title: '积分', sort: true, width:80}
                // ,{field:'score', title: '评分', sort: true, width:80}
                // ,{field:'classify', title: '职业', width:80}
                // ,{field:'wealth', title: '财富', sort: true, width:135}
            ]]
            , id: 'testReload'
            , page: true
            , height: 315
        });

        active = {
            reload: function () {
                var name = $('#nameReload');

                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        name: name.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    function add() {
        layer.open({
            title: "添加用户"
            , area: ['700px', '700px']
            , type: 2
            , fixed: false //不固定
            , maxmin: true
            , content: basePath + "/sysUser/add"
        });
    }
</script>